import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';

enum ReportType {
  inappropriateContent('Inappropriate Content', Icons.warning_amber_outlined),
  hateSpeech('Hate Speech', Icons.sentiment_very_dissatisfied_outlined),
  disturbingContent('Disturbing Content', Icons.visibility_off_outlined),
  illegalActivity('Illegal Activity', Icons.gavel_outlined),
  spamAdvertisement('Spam/Advertisement', Icons.block_outlined),
  otherIssues('Other Issues', Icons.help_outline),
  blockUser('Block User', Icons.person_off_outlined);

  const ReportType(this.title, this.icon);
  final String title;
  final IconData icon;
}

class ReportPopupDialog extends StatefulWidget {
  final Function(ReportType reportType)? onReportSubmitted;
  final VoidCallback? onCancelPressed;

  const ReportPopupDialog({
    super.key,
    this.onReportSubmitted,
    this.onCancelPressed,
  });

  @override
  State<ReportPopupDialog> createState() => _ReportPopupDialogState();
}

class _ReportPopupDialogState extends State<ReportPopupDialog> {
  ReportType? selectedReportType;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          width: 340.w,
          margin: EdgeInsets.only(top: 40.h),
          decoration: BoxDecoration(
            color: const Color(0xFFFDF5E1),
            borderRadius: BorderRadius.circular(20.r),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.15),
                blurRadius: 20.r,
                offset: Offset(0, 8.h),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildHeader(),
              _buildReportOptions(),
              _buildActionButtons(),
            ],
          ),
        ),
        Positioned(
          top: -80.h,
          left: 0,
          right: 0.h,
          child: Center(
            child: SizedBox(
              width: 230.w,
              height: 195.h,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(40.r),
                child: Image.asset(
                  'assets/resources/flower_dialog.png',
                  width: 80.w,
                  height: 80.h,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 80.w,
                      height: 80.h,
                      decoration: BoxDecoration(
                        color: const Color(0xFF2AB061),
                        borderRadius: BorderRadius.circular(40.r),
                      ),
                      child: Icon(
                        Icons.flag_outlined,
                        size: 40.sp,
                        color: Colors.white,
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildHeader() {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.fromLTRB(24.w, 60.h, 24.w, 20.w),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF2AB061), Color(0xFF1E8B4F)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.r),
          topRight: Radius.circular(20.r),
        ),
      ),
      child: Column(
        children: [
          Text(
            'Report Content',
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildReportOptions() {
    return Container(
      padding: EdgeInsets.all(20.w),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children:
            ReportType.values.map((reportType) {
              final isSelected = selectedReportType == reportType;
              return GestureDetector(
                onTap: () {
                  setState(() {
                    selectedReportType = reportType;
                  });
                },
                child: Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(bottom: 6.h),
                  padding: EdgeInsets.symmetric(
                    horizontal: 16.w,
                    vertical: 10.h,
                  ),
                  decoration: BoxDecoration(
                    color:
                        isSelected
                            ? const Color(0xFF2AB061).withValues(alpha: 0.1)
                            : Colors.white,
                    borderRadius: BorderRadius.circular(12.r),
                    border: Border.all(
                      color:
                          isSelected
                              ? const Color(0xFF2AB061)
                              : Colors.grey.withValues(alpha: 0.2),
                      width: isSelected ? 2 : 1,
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withValues(alpha: 0.05),
                        blurRadius: 4.r,
                        offset: Offset(0, 2.h),
                      ),
                    ],
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: Text(
                          reportType.title,
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight:
                                isSelected ? FontWeight.w600 : FontWeight.w500,
                            color:
                                isSelected
                                    ? const Color(0xFF2AB061)
                                    : const Color(0xFF333333),
                          ),
                        ),
                      ),
                      if (isSelected)
                        Icon(
                          Icons.check_circle,
                          size: 16.sp,
                          color: const Color(0xFF2AB061),
                        ),
                    ],
                  ),
                ),
              );
            }).toList(),
      ),
    );
  }

  Widget _buildActionButtons() {
    return Container(
      padding: EdgeInsets.all(20.w),
      child: Row(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: widget.onCancelPressed,
              child: Container(
                height: 48.h,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(24.r),
                  border: Border.all(
                    color: const Color(0xFF2AB061).withValues(alpha: 0.3),
                    width: 1,
                  ),
                ),
                child: Center(
                  child: Text(
                    'Cancel',
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                      color: const Color(0xFF2AB061),
                    ),
                  ),
                ),
              ),
            ),
          ),

          SizedBox(width: 12.w),

          Expanded(
            child: GestureDetector(
              onTap: selectedReportType != null ? _handleSubmitReport : null,
              child: Container(
                height: 48.h,
                decoration: BoxDecoration(
                  gradient:
                      selectedReportType != null
                          ? const LinearGradient(
                            colors: [Color(0xFF2AB061), Color(0xFF1E8B4F)],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          )
                          : null,
                  color:
                      selectedReportType == null
                          ? Colors.grey.withValues(alpha: 0.3)
                          : null,
                  borderRadius: BorderRadius.circular(24.r),
                  boxShadow:
                      selectedReportType != null
                          ? [
                            BoxShadow(
                              color: const Color(
                                0xFF2AB061,
                              ).withValues(alpha: 0.3),
                              blurRadius: 8.r,
                              offset: Offset(0, 4.h),
                            ),
                          ]
                          : null,
                ),
                child: Center(
                  child: Text(
                    'Submit Report',
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                      color:
                          selectedReportType != null
                              ? Colors.white
                              : Colors.grey,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _handleSubmitReport() {
    if (selectedReportType != null) {
      widget.onReportSubmitted?.call(selectedReportType!);
    }
  }
}
